<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Dom</title>
</head>
<body>
<!--<div id="div">我是div</div>-->
<!--<input type="button" id="btn1" value="获取div的文本">-->
<!--<input type="button" id="btn2" value="设置div的文本">-->

<input type="text" id="username">
<br>
<input type="button" id="btn1" value="获取输入框的id属性">  &nbsp;&nbsp;
<input type="button" id="btn2" value="给输入框设置value属性">
<br><br>

<input type="radio" id="gender1" name="gender">男
<input type="radio" id="gender2" name="gender">女
<br>
<input type="button" id="btn3" value="选中女">
<br><br>

<select>
    <option>---请选择---</option>
    <option id="bk">本科</option>
    <option id="zk">专科</option>
</select>
<br>
<input type="button" id="btn4" value="选中本科">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1 html()  获取标签体的文本内容(可解析)
    // let div = $("#div").html();
    // alert(div);
    // $("#div").html("你好");

    // 2.var() 获取属性varlue值
    // let  input= $("#btn1").val();
    // $("#btn1").val("你好");
    // alert($("#btn1").val());

    // //3 text() 获取标签体的文本内容
    // var text = $("#div").text();
    // alert(text)

    // 操作属性

    // 1.attr(name,value())
    // $("#btn1").click(function () {
    //    alert($("#username").attr("id"));
    // });
    //
    // //:给输入框设置val属性
    // $("#btn2").click(function () {
    //    alert($("#username").attr("value","你好"));
    // });


    // 2.prop(name,[value])   获得/设置的属性的值
    //按钮三：选中女
    $("#btn3").click(function(){
        $("#gender2").prop("checked",true);
    });

    //按钮四：选中本科
    $("#btn4").click(function(){
        $("#bk").prop("selected",true);});

</script>
</html>